<template>
  <el-form inline>
    <el-form-item label="一级分类">
        <!-- 下来菜单中选中的那个菜单的id会被自动保存到v-model指令所需的表达式中category1Id -->
        <el-select v-model="category1Id" placeholder="请选择" @change="changeCategory1Id" :disabled="isDisabled">
        <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in category1List" :key="c1.id"></el-option>
        </el-select>   
    </el-form-item>
     <el-form-item label="二级分类">
        <!-- 下来菜单中选中的那个菜单的id会被自动保存到v-model指令所需的表达式中category1Id -->
        <el-select v-model="category2Id" placeholder="请选择" @change="changeCategory2Id" :disabled="isDisabled">
        <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in category2List" :key="c2.id"></el-option>
        </el-select>
    </el-form-item>
     <el-form-item label="三级分类">
        <!-- 下来菜单中选中的那个菜单的id会被自动保存到v-model指令所需的表达式中category1Id -->
        <el-select v-model="category3Id" placeholder="请选择" @change="changeCategory3Id" :disabled="isDisabled">
        <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in category3List" :key="c3.id"></el-option>
        </el-select>
    </el-form-item>
</el-form>
</template>

<script>
  export default {
      name:'CategorySelector',
       data(){
          return {
           category1Id:'', //一级分类Id
           category2Id:'', //二级分类Id
           category3Id:'', //三级分类Id
           category1List:[],//一级分类列表数据
           category2List:[],//二级分类列表数据
           category3List:[],//三级分类列表数据
           isDisabled:false,//选择器组件是否禁用标识
          }
      },
      //页面加载完毕生命周期的钩子
       mounted(){
           //获取一级分类
           this.getCategory1List()
       },
       methods: {
           //获取一级分类菜单列表数据
        async getCategory1List(){
           const result = await this.$API.category.getCategory1();  
            // console.log(result) 
            //更新数据
            if(result.code==200){
                this.category1List = result.data
            }           
        },
        //获取二级分类列表数据
       async changeCategory1Id(categoryId){
            // this.category1Id = categoryId
            //置空二级、三级分类的id以及列表数据
            this.category2Id=''
            this.category3Id=''
            this.category2List=[]
            this.category3List=[]
            //分发自定义事件，告诉父级组件的当前级别的标识和此时的分类Id
            this.$emit('changeCategoryId',{level:1,categoryId})//谁提供数据谁用$emit触发自定义事件
            const result = await this.$API.category.getCategory2(categoryId)
            // console.log(result)
            if(result.code==200){
              this.category2List = result.data
            }
        },
        //获取三级分类列表数据
        async changeCategory2Id(categoryId){
            // this.category2Id = categoryId
            //置空三级分类的id以及列表数据
            this.category3Id=''
            this.category3List=[]
             //分发自定义事件，告诉父级组件的当前级别的标识和此时的分类Id
            this.$emit('changeCategoryId',{level:2,categoryId})
            const result = await this.$API.category.getCategory3(categoryId)
            // console.log(result)
            if(result.code==200){
              this.category3List = result.data
            }
        },
         //当改变三级分类id的时候，获取三级分类列表数据，分发自定义事件告诉父级组件
        async changeCategory3Id(categoryId){
             //分发自定义事件，告诉父级组件的当前级别的标识和此时的分类Id
            this.$emit('changeCategoryId',{level:3,categoryId})
        },
          
                 
       },
  }
</script>

<style scoped>
  
</style>